<template>
  <div class="m-box">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
          <img :src="item.image" alt="" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
import wxShare from "../assets/js/wxShare.js";
export default {
  data() {
    return {
      mySwiper: null,
      bannerList: [],
    };
  },
  mounted() {
 this.onshare();
    this.$nextTick(() => {
      this.initSwiper();
    })

    this.$axios
      .get("/api/home_page/getBanner", {
        params: { type: 2 },
      })
      .then((r) => {
        this.bannerList = r.data;
      });
  },
  methods: {
       //微信分享
    onshare() {
      let _param = {
        // studentId: 1, // 个人项目而定
        // activityId: 1, // 个人项目而定
        // url: location.href, // 当前页面url
        title: "好数智--手机靓号商城", // 分享数据配置
        desc: "中国移动、联通、电信手机靓号、宽带在线办理业务。", // 分享数据配置
        link: location.href, // 分享数据配置
        imgUrl: "http://digital.haoshuzhi.cn/public/static/images/fxlogo.jpg", // 分享数据配置  －－ 全路径
        type: "link", // 分享类型,music、video或link，不填默认为link
        dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
      };
      this.$get(
        "/api/Wxfx/index?url=" + encodeURIComponent(location.href.split('#')[0])
      ).then((res) => {
        let data = res.data;
        _param;
        wxShare.getJSSDK(data, _param);
      });
    },

    initSwiper() {
      setTimeout(() => {
        this.mySwiper = new Swiper(".swiper-container", {
          loopAdditionalSlides: 3,
          loop: true,
          speed: 500,
          autoplay: 3000,
          autoplayDisableOnInteraction: false,
          pagination: ".swiper-pagination",
          observer: true, // 启动动态检查器(OB/观众/观看者)
          observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        });
      }, 300);
    },
  },

};
</script>

<style lang="less" scoped>
@import "../assets/css/base.less";
.m-box,
.swiper-container {
  width: 100%;
  height: 100%;
  border-radius: 6 / @vw;
}
.m-box img {
  width: 100%;
  height: 100%;
  border-radius: 6 / @vw;
}
.swiper-slide {
  text-align: center;
  font-size: 18 / @vw;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-container {
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #00ff33; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30 / @vw; /* 设置按钮大小 */
}
.m-box /deep/ .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #fff !important;
}
.m-box /deep/ .swiper-pagination-bullet {
  background: transparent;
  border: 1 / @vw solid #fff;
  box-sizing: border-box;
  opacity: 1;
}
.mybox {
  margin: -20 / @vw 0;
}
</style>